<template>
  <el-icon
    v-if="icon"
    :class="[{ disabled: props.disabled, interaction: props.interaction, active: props.active }]"
  >
    <Edit v-if="icon === 'Edit'" />
    <Plus v-else-if="icon === 'Plus'" />
    <Minus v-else-if="icon === 'Minus'" />
    <Close v-else-if="icon === 'Close'" />
    <Star v-else-if="icon === 'Star'" />
    <Setting v-else-if="icon === 'Setting'" />
    <Operation v-else-if="icon === 'Operation'" />
    <Menu v-else-if="icon === 'Menu'" />
    <Position v-else-if="icon === 'Position'" />
  </el-icon>
</template>

<script lang="ts">
export default defineComponent({ name: 'ViewsFormCreateDemo' })
</script>
<script setup lang="ts">
import { defineComponent } from 'vue'

const props = defineProps({
  icon: String,
  disabled: Boolean,
  interaction: Boolean,
  active: Boolean
})
const { icon } = props || {}
</script>

<style lang="scss" scoped>
.interaction {
  // 可互动的
  cursor: pointer;
  &:hover {
    color: $base-active-color !important;
  }
}
.disabled {
  // 不可用的
  color: $base-disabled-color !important;
  &.interaction {
    cursor: default;
  }
  &.interaction:hover {
    color: $base-disabled-color !important;
  }
}
.active {
  // 激活中
  color: $base-active-color !important;
}
</style>
